<template>
    <div class="centerBottom" ref="centerBottom">
        <!-- 环形图 -->
        <div class="chart-box">
            <pie-chart1></pie-chart1>
        </div>
        <div class="chart-box">
            <pie-chart2></pie-chart2>
        </div>
        <div class="chart-box">
            <pie-chart3></pie-chart3>
        </div>
        <div class="chart-box">
            <pie-chart4></pie-chart4>
        </div>
    </div>
</template>

<script>
import HighchartsComponent from '@/components/highchart/3dPie'
import pieChart1 from '../components/echart/bottom/pieChart1'
import pieChart2 from '../components/echart/bottom/pieChart2'
import pieChart3 from '../components/echart/bottom/pieChart3'
import pieChart4 from '../components/echart/bottom/pieChart4'

export default {
    data(){
        return{
            styles: {
                width: 220,
                height: 180,
            },
            options: {
               credits: {
			        enabled: false //去除网址水印
                },
                chart: {
                    spacing : [0, 0, 0, 0],
                    backgroundColor: 'rgba(0,0,0,0)'
                },
                title: {
                    floating:true,
                    text: '圆心显示的标题'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                series: [{
                    type: 'pie',
                    innerSize: '80%',
                    name: '市场份额',
                    data: [
                        {name:'Firefox',   y: 45.0, url : 'http://bbs.hcharts.cn'},
                        ['IE',       26.8],
                        {
                            name: 'Chrome',
                            y: 12.8,
                            sliced: true,
                            selected: true,
                            url: 'http://www.hcharts.cn'
                        },
                        ['Safari',    8.5],
                        ['Opera',     6.2],
                        ['其他',   0.7]
                    ]
                }]
            }
               
                
                
                
        } 
    },
    computed:{
        isShow(){
            return this.$store.state.clIsShow
        }
    },
    watch:{
        isShow(){
            classie.toggle( this.$refs.centerBottom, 'bottom-open')
        }
    },
    components:{
        HighchartsComponent,
        pieChart1,
        pieChart2,
        pieChart3,
        pieChart4,
    }
}
</script>

<style lang="less" scoped>
.centerBottom{
    width: 50%;
    height: 3rem;
    position: fixed;
    bottom: -3rem;
    display: grid;
    grid-template-columns: repeat(4,24%);
    grid-template-rows: 90%;
    grid-column-gap: 0.2rem; //左右间距
    justify-content: center;
    align-content: end;
    // border: 1px solid red;
    
}  
.centerBottom.bottom-open{
    bottom: 0rem;
    transition: 0.2s;
} 
</style>